<!--
 * @Author: YeFei
 * @Date: 2021-11-06 11:27:48
 * @LastEditTime: 2021-12-06 19:58:09
 * @Descripttion:
-->
<template>
  <a-drawer
    :title="$route.meta.title"
    width="640"
    placement="right"
    :closable="false"
    :visible="showDetail"
    @close="$parent.showDetail = false"
  >
    <h2 :style="pStyle2">用户详情</h2>
    <a-descriptions title="基本信息">
      <a-descriptions-item label="英文名">
        {{ detailData.username }}
      </a-descriptions-item>
      <a-descriptions-item label="中文名">
        {{ detailData.realname }}
      </a-descriptions-item>
      <a-descriptions-item label="性别">
        {{ detailData.sex | sexFilter }}
      </a-descriptions-item>
    </a-descriptions>

    <a-divider />

    <a-descriptions title="联系方式">
      <a-descriptions-item label="邮箱">
        {{ detailData.email }}
      </a-descriptions-item>
      <a-descriptions-item label="手机">
        {{ detailData.mobile }}
      </a-descriptions-item>
    </a-descriptions>

    <a-divider />

    <a-descriptions title="登录信息">
      <a-descriptions-item label="每周密钥">
        {{ detailData.week_verify }}
      </a-descriptions-item>
    </a-descriptions>

    <a-divider />

    <a-descriptions title="用户状态">
      <a-descriptions-item label="状态">
        <a-badge
          :status="statusTypeFilter(detailData.status)"
          :text="statusFilter(detailData.status)"
        />
      </a-descriptions-item>
      <a-descriptions-item label="停用时间">
        {{ detailData.stop_date | formatStamp}}
      </a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script>
import User from "@/api/user"
export default {
  props: {
    detailData: {
      type: Object,
      default: () => ({}),
    },
    showDetail: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    showDetail(newValue) {
      if (newValue) {
      }
    },
  },
  data() {
    this.statusMap = {
      1: {
        status: "success",
        text: "正常",
      },
      0: {
        status: "default",
        text: "停用",
      },
      "-1": {
        status: "error",
        text: "冻结",
      },
    }
    return {
      pStyle: {
        fontSize: "16px",
        color: "rgba(0,0,0,0.85)",
        lineHeight: "24px",
        display: "block",
        marginBottom: "16px",
      },
      pStyle2: {
        marginBottom: "24px",
      },
    }
  },
  filters: {
    sexFilter(key) {
      return ["男", "女"][key]
    },
  },
  methods: {
    statusFilter(status) {
      return this.statusMap[status + ""]&&this.statusMap[status + ""].text
    },
    statusTypeFilter(status) {
      return this.statusMap[status + ""]&&this.statusMap[status + ""].status
    },
  },
}
</script>

<style>
</style>
